﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo shows how to filter values depending on the selection
        of the jqxRangeSelector. </title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxrangeselector.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxRangeSelector.
            $("#rangeSelector").jqxRangeSelector({
                width: 750, height: 80, min: "January 01, 1800", max: "January 01, 1900",
                majorTicksInterval: { years: 10 }, minorTicksInterval: "year", labelsFormat: "yyyy", markersFormat: "yyyy"
            });

            var url = "../sampledata/discoveries.txt";

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: "discovery", type: "string" },
                    { name: "scientist", type: "string" },
                    { name: "year", type: "date" }
                ],
                id: "id",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxGrid").jqxGrid(
            {
                theme: theme,
                width: 850,
                height: 300,
                source: dataAdapter,
                filterable: true,
                columns: [
                  { text: "Discovery", columngroup: "header", datafield: "discovery", width: 250 },
                  { text: "Scientist", columngroup: "header", datafield: "scientist", width: 210 },
                  { text: "Year", columngroup: "header", datafield: "year", cellsformat: "yyyy" }
                ],
                columngroups: [
                    { text: "Major scientific discoveries in the 19th century", align: "center", name: "header" }
                ]
            });

            var applyFilter = function (from, to) {
                $("#jqxGrid").jqxGrid("clearfilters");
                filtertype = "datefilter";

                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;

                var filtervalueFrom = from;
                var filterconditionFrom = "GREATER_THAN_OR_EQUAL";
                var filterFrom = filtergroup.createfilter(filtertype, filtervalueFrom, filterconditionFrom);
                filtergroup.addfilter(filter_or_operator, filterFrom);

                var filtervalueTo = to;
                var filterconditionTo = "LESS_THAN_OR_EQUAL";
                var filterTo = filtergroup.createfilter(filtertype, filtervalueTo, filterconditionTo);
                filtergroup.addfilter(filter_or_operator, filterTo);

                $("#jqxGrid").jqxGrid("addfilter", "year", filtergroup);
                $("#jqxGrid").jqxGrid("applyfilters");
            };

            // update filter on "change" event.
            $("#rangeSelector").on("change", function (event) {
                var range = event.args;
                var min = $("#rangeSelector").jqxRangeSelector("min");
                var max = $("#rangeSelector").jqxRangeSelector("max");
                min = new Date(min);
                max = new Date(max);
                if (range.from.getTime() == min.getTime() && range.to.getTime() == max.getTime()) {
                    $("#jqxGrid").jqxGrid("clearfilters");
                } else {
                    applyFilter(range.from, range.to);
                };
            });
        });
    </script>
</head>
<body>
    <label style="font-size: 13px; font-family: Verdana;">Major scientific discoveries in selected period:
   </label>
    <div id="jqxGrid" style="margin-top: 10px;">
    </div>
    <br />
    <label style="font-size: 13px; margin-top: 10px; font-family: Verdana;">Select period:
   </label>
    <br />
    <div id="rangeSelector">
        <div id="jqxRangeSelectorContent">
        </div>
    </div>
</body>
</html>
